<template>
  <div class="container">
    <div class="app-container">
      <el-tree :data="depas" default-expand-all :props="defaultProps" :expand-on-click-node="false">
        <template v-slot="{ data }">
          <el-row type="flex" justify="space-between" align="middle" style="width: 100%; height: 40px;">
           <el-col >{{ data.name }}</el-col>
            <el-col :span="4">
             <span class="administrators">{{ data.managerName }}</span>
             <!-- 下拉菜单 -->
              <el-dropdown @command="handleCommand($event, data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="b">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="c">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
           </el-col>
        </el-row>
        </template>
      </el-tree>
     </div>
       <AddDepat ref="dept" 
       :showDialog.sync = showDialog 
       :currentNodeId = 'currentNodeId' 
       @updataDept = "getDepart" 
       @changeShow = "changeShow"
       :title="title"
       >
      </AddDepat>
  </div>
</template>

<script>
import { getDepartSerice , getDelDeptService} from '@/api/department';
import { tranListToTreeData } from '@/utils';
import AddDepat from '@/views/department/compoents/add-dialog.vue'
import { Message } from 'element-ui';
export default {
   name: 'Department',
   components: { AddDepat },
   data(){
    return {
      title: '',
      currentNodeId: null,
      showDialog: false,
      depas:[],
      defaultProps: {
          children: 'children',
          label: 'name'
        }
    }
   },
   created(){
    this.getDepart()
   },
   methods: {
    changeShow(){
      this.showDialog = false
    },
   async getDepart() {
      const res = await getDepartSerice()
      this.depas = tranListToTreeData(res, 0)
    },
    async handleCommand(type, id){
       if(type === 'a'){
         this.showDialog = true
         this.title = '新增部门'
         this.currentNodeId = id
       } else if (type === 'b') {
          this.showDialog = true
          this.title = '编辑部门'
          this.currentNodeId = id
          this.$nextTick(() => {
            this.$refs.dept.getExit() //this.$refs.dept,通过ref绑定，就相当于拿到了子组件的this
        })
       }else if(type === 'c'){
         await this.$confirm('确定删除该部门吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await getDelDeptService(id)
        this.getDepart()
        Message({ type: 'success' , message: '删除成功' })
       }
    },
   }

}
</script>

<style lang="scss" scoped>
.app-container{
  padding: 40px 140px;
}
.administrators{
   display: inline-block;
   width: 100px;
   margin-right: 20px ;
}
.dialog{
  width: 300px;
  border: 1px solid #000;
}
</style>